<script lang='ts' setup>
import { reactive, ref, watch } from 'vue'
import UnitTreeDialog from './unit-tree-dialog.vue';

const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void,
    (e: 'update:unitId', val: string | undefined): void,
    (e: 'update:unitName', val: string | undefined): void,
}>()

const props = defineProps({
    /**是否显示 */
    visible: {
        type: Boolean,
        default: false
    },
    unitId: {
        type: String
    },
    unitName: {
        type: String
    }
})

const unitTreeDialogRef = ref();

//设置是否显示双向绑定
const visibleModelValue = ref(props.visible)
watch(() => props.visible, val => {
    visibleModelValue.value = val;
})
watch(visibleModelValue, val => {
    emit("update:visible", val)
})

//设置部门id双向绑定
const unitIdModelValue = ref(props.unitId)
watch(() => props.unitId, val => {
    unitIdModelValue.value = val;
})
watch(unitIdModelValue, val => {
    emit("update:unitId", val)
})

//设置部门名称双向绑定
const unitNameModelValue = ref(props.unitName)
watch(() => props.unitName, val => {
    unitNameModelValue.value = val;
})
watch(unitNameModelValue, val => {
    emit("update:unitName", val)
})



const UnitTreeDialogInputState = reactive({
    onSelectClick: () => {
        visibleModelValue.value = true
    },
    onClearClick: () => {
        unitIdModelValue.value = undefined;
        unitNameModelValue.value = undefined;
    },
    onChangeUnit: (data: any) => {
        unitIdModelValue.value = data.id;
        unitNameModelValue.value = data.text;
    }
})
</script>
<template>
    <unit-tree-dialog
        ref="unitTreeDialogRef"
        v-model:visible="visibleModelValue"
        @change-unit="UnitTreeDialogInputState.onChangeUnit"
    >
        <jxtech-select-input
            v-model:inputValue="unitNameModelValue"
            @select-click="UnitTreeDialogInputState.onSelectClick"
            @clear-click="UnitTreeDialogInputState.onClearClick"
        ></jxtech-select-input>
    </unit-tree-dialog>
</template>